<div class="section">
  <div class="section-content">
    <div class="content-top">创建计划</div>
    <div>
    <div class="content-one" (click)="createPlan()">
      <img src="assets/images/new-1.png"/>
      <span>点击创建新计划</span>
    </div>
    <div class="content-one" (click)="export()">
        <img src="assets/images/output-1.png"/>
        <span>导出文件</span>
    </div>
    <div class="content-one">
        <img src="assets/images/print-1.png"/>
        <span>点击打印显示计划</span>
    </div>
  </div>
  </div>
  <table *ngFor="let plan of plans" class="border even-tr">
      <tr>
          <th  class="table-back" colspan="2" style="width: 40%;">
            <span>{{plan.name}}</span>
            <label (click)="updatePlan(plan.id)" *ngIf="user.manager">编辑计划</label>
          </th>
          <th>状态</th>
          <th>需求方</th>
          <th>负责人</th>
          <th>开始时间</th>
          <th>结束时间</th>
          <th>工期</th>
          <th>总工时</th>
          <th>完成度</th>
      </tr>
           <tr *ngFor="let project of plan.projects; let i = index">
             <td  *ngIf=" i==0"  [attr.rowspan]="plan.projects_count" class="table-img"><img src="{{plan.image}}"/></td>
             <td (click)="goProject(project)">{{project.name}}</td>
             <td *ngIf="project.completion == 1">已完成</td>
             <td *ngIf="project.completion != 1">进行中</td>
             <td>{{project.demander.name}}</td>
             <td>{{project.leader.name}}</td>
             <td>{{project.s_date}}</td>
             <td>{{project.e_date}}</td>
             <td>{{project.work_days}}工作日</td>
             <td>{{project.hours}}</td>
             <td>{{project.completion}}</td>
           </tr>
           <tr>
             <td>工时:{{plan.total_hour}}</td>
             <td class="font-style" (click)="createProject(plan.id)" *ngIf="user.manager">新建项目</td>
           </tr>
     </table>
</div>

<div class="mask" *ngIf="sideShowed">
  <div class="opendiv">
    <div class="new-plan">
      <span>添加计划</span>
      <img src="assets/images/x.png" (click)="sideShowed = !sideShowed" />
    </div>
    <div class="plan-form">
    <!-- form ngNoForm target="post-ifm" enctype="multipart/form-data" action="{{bh}}.json" method="POST" -->
      <div class="one">
        <span>计划名称</span>
        <input name="plan[name]" type="text" [(ngModel)]="plan.name">
        <!--input type="hidden" name="token" value="{{user.token}}"  /-->
      </div>
      <div class="two">
        <span>上传图片</span>
        <i><input  type="file" accept="image/png,image/jpeg" (change)="changeMoonCover($event)" ></i>
        <img src="{{plan.image}}"/>
        <label>支持jpg/gif/png格式,RGB模式，单张(长<800,宽<2000,大小<1MB)</label>
      </div>
      <div class="submit">
          <!--input type="submit" value="" class="save"/ -->
          <i class="save" (click)="save(plan)" ></i>
          <i class="cancel" (click)="sideShowed = !sideShowed"></i>
      </div>
    <!--/form -->
    </div>
    <!-- iframe id="post-ifm" name="post-ifm" style="position: absolute; left: -999cm" src="about:blank"></iframe -->
  </div>
</div>


<div class="mask" *ngIf="projectShowed">
  <div class="project-opendiv">
    <div class="new-plan">
      <span>添加项目</span>
      <img src="assets/images/x.png" (click)="projectShowed = !projectShowed" />
    </div>
    <div class="project-form">
    <table style="border-spacing:10px 10px">
      <tr>
        <td>项目类型</td>
        <td colspan="3">
        <select [(ngModel)]="project.type_id" >
            <option *ngFor="let type of types" [value]="type.id">{{type.name}}</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>项目负责人</td>
        <td>
        <select [(ngModel)]="project.leader_id">
            <option *ngFor="let user of users" [value]="user.id">{{user.name}}</option>
          </select>
          </td>
        <td>项目需求方</td>
        <td>
        <select [(ngModel)]="project.demander_id">
            <option *ngFor="let user of users" [value]="user.id">{{user.name}}</option>
          </select>
        </td>
      </tr>
      <tr>
          <td>项目名称</td>
          <td colspan="3"><input [(ngModel)]="project.name" type="text"></td>
      </tr>
      <tr>
        <td>项目描述</td>
          <td colspan="3"><textarea [(ngModel)]="project.desc"></textarea></td>
      </tr>
      <tr>
          <td>项目重要度</td>
          <td><input [(ngModel)]="project.importance" type="text"></td>
          <td>项目优先级</td>
          <td><input [(ngModel)]="project.priority" type="text"></td>
      </tr>
      <tr>
          <td>项目开始时间</td>
          <td><input [(ngModel)]="project.s_date" mdInput type="date" ></td>
          <td>项目结束时间</td>
          <td><input [(ngModel)]="project.e_date" mdInput type="date"></td>
      </tr>
      </table>
       <table style="border-spacing:10px 10px">
       <tr><td><button (click)="add()">添加</button></td></tr>
        <tr *ngFor="let milestone of project.milestones_attributes;let i = index">
          <td rolspan="10">添加里程碑</td>
          <td><input [(ngModel)]="milestone.title" type="text"></td>
          <td><input [(ngModel)]="milestone.date" mdInput type="date" ></td>
          <td><button (click)="delete(i)">删除</button></td>
      </tr>
      </table>

      <div class="submit">
          <i class="save" (click)="submit()"></i>
          <i class="cancel" (click)="projectShowed = !projectShowed"></i>
      </div>
     </div>
  </div>
</div>





















<!--

<div class="section">
  <div class="head_tab">
    <ul>
      <li>全部</li>
      <li>进行中</li>
      <li>未完成</li>
      <li>已完成</li>
      <li>已取消</li>
      <li>待评价</li>
      <li>添加项目</li>
    </ul>
  </div>
  <table class="border">
    <tr>
      <th>#</th>
      <th>项目状态</th>
      <th>项目名称</th>
      <th>需求方</th>
      <th>项目负责人</th>
      <th>开始时间</th>
      <th>结束时间</th>
      <th>工期</th>
      <th>用天</th>
      <th>余天</th>
      <th>参与人员</th>
      <th>总工时</th>
      <th>完成度</th>
    </tr>
    <tr *ngFor="let project of projects; let i=index" class="tr_data">
      <td>{{i + 1}}</td>
      <td><span *ngFor="let stage of project.stages; let si=index">
        <span *ngIf="si != 0">, </span>{{stage.name}}</span>
        <span *ngIf="project.completion == 1">已完成</span>
        <span *ngIf="!project.completion == 1 && (!project.stages || project.stages.length == 0)"
          >/</span></td>
      <td style="text-align: left; padding: 0 8px;"><a href="projects/{{project.id}}"
          (click)="goProject(project)">{{project.name}}</a></td>
      <td><a (click)="goUserTasks(project.demander_id)" href="users/{{project.demander_id}}/tasks"
          >{{project.demander ? project.demander.name : "其他"}}</a>
      </td>
      <td>
        <a (click)="goUserTasks(project.leader_id)" href="users/{{project.leader_id}}/tasks">{{project.leader.name}}</a>
      </td>
      <td>{{project.s_date}}</td>
      <td>{{project.e_date}}</td>
      <td>{{project.work_days}}工作日</td>
      <td>{{project.used_days}}</td>
      <td>{{project.remain_days}}</td>
      <td>{{project.user_count}}</td>
      <td>{{project.hours}}</td>
      <td>{{project.completion | percent}}</td>
    </tr>
  </table>
</div>
<div class="section" style="text-align: center;" *ngIf="user && user.manager">
  <p><button md-raised-button color="primary" (click)="createProject()">添加项目</button>
</div>

-->
